<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      ref="treeTable"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :select-on-indeterminate="false"
      @selection-change="handleSelectionChange"
      @select="selectRow"
      @select-all="selectAll">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
</template>

<script>
    export default {
      name: "treeTable",
      components:{

      },
      created() {

      },
      mounted() {

      },
      computed:{

      },
      data(){
        return{
          selectedRows : [],
          tableData: [{
            id: 1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            children: []
          }, {
            id: 2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            children: []
          }, {
            id: 3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            // hasChildren:false,
            children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: []
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: []
            }]
          }, {
            id: 4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            children: []
          },
            {
              id: 33,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              // hasChildren:false,
              children: [{
                id: 313,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                children: []
              }, {
                id: 323,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                children: [
                  {
                    id: 31333,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    children: []
                  },
                  {
                    id: 313434,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    children: []
                  }
                ]
              }]
            }],
        }
      },
      methods:{
        // 获取权限
        handleEdit(index,row){
          console.log(index,row)

        },
        handleDelete(index,row){
          console.log(index,row)

        },
        handleSelectionChange(val){
          this.selectedRows = val;
          console.log("selectChange", this.selectedRows);
        },
        selectAll(selection){
          // 全选
          // 如果当前有已经选中的，则selection 为[] 最终结果是去除勾选   否则长度为5全部勾选
          console.log("selectAll",selection)
          let isSelect = selection.some((item) => {
            let tableDataIds = this.tableData.map((data) => data.id);
            if (tableDataIds.indexOf(item.id) !== -1) { //
              return true;
            } else {
              return false;
            }
          });
          // 全不选 (当前如果有选中的,就取消勾选)
          let isCancel = !this.tableData.every((item) => {
            let selectIds = selection.map((data) => data.id);
            if (selectIds.indexOf(item.id) !== -1) {
              return true;
            } else {
              return false;
            }
          });
          console.log("isSelect",isSelect)
          console.log("isCancel",isCancel)
          if (isSelect) {
            selection.map((item) => {
              if (item.children) {
                this.setChildren(item.children, true);
              }
            });
          }
          if (isCancel) {
            this.tableData.map((item) => {
              if (item.children) {
                this.setChildren(item.children, false);
              }
            });
          }
        },


        // 勾选父节点时，子层级一起勾选或一起取消勾选
        selectRow(selection, row) {
          console.log("selectRow", selection, row); // 选中的[] ,当前点击的行row
          let data = selection.some((item) => {
            return row.id === item.id;
          });
          if (data) {
            // 勾选节点时
            if (row.children) {
              this.setChildren(row.children, true);
            }
          } else {
            // 取消勾选节点时
            if (row.children) {
              this.setChildren(row.children, false);
            }
          }
        },

        setChildren(children, type) {
          children.map((item) => {
            this.toggleSelection(item, type);
            if (item.children) {
              this.setChildren(item.children, type);
            }
          });
        },
        // 是否勾选的代码
        toggleSelection(row, select) {
          if (row) {
            this.$nextTick(() => {
              this.$refs.treeTable.toggleRowSelection(row, select);
            });
          }
        }
      },
      watch:{

      },
      beforeDestroy() {

      }

    }
</script>

<style scoped lang="scss">

</style>
